<html>
    <head>
        <title>编译作用域</title>
    </head>
    <body>
        <script>
            // 编译作用域
                     // 当你像在一个插槽中使用数据时，例如:
                                /*
                                    <navigation-link url="/profile">
                                        Logged in as  {{ user.name}}
                                    </navigation-link>
                                */
                    /*
                        该插槽根模板的其他地方一样，可以访问实例的property(属性) (也就是，插槽内部与组件外部有"相同的作用域")

                        但是插槽中"不能访问"<navigation-link>组件对应实例的"作用域"！(在谁的模板声明的插槽，插槽就只能访问谁的作用域)
                    */ 
                        // 例如：  url是访问不到的：
                                /*
                                    <navigation-link url="/prpfile">
                                        Clicking here will send you to: {{ url }}
                                        --- 这里的'url'会是 undefined ，因为其插槽中的内容是 "传递给<navigation-link>组件的",而不是在组件内部定义了"插槽内容"---
                                    </navigation-link>
                                */

                    /*
                        作为一条规则，请记住：
                            "父级组件模板中声明的所有内容都是"在父级组件作用域中编译"的，子级组件模板里声明的所有内容都是在"子级组件的作用域中编译"的。"
                    */
        </script>
    </body>
</html>